styles.css

 

دانلود قالب فارسي براي طراحي سي اس اس css

 

فايلي را که دانلود کرده ايد يک فايل zip. است که بعد از extract شدن (خارج شدن از حالت zip ) فولدري را در اختيارتان قرار ميدهد که حاوي سه فايل ميباشد:

 

2-column.htm

 

reset.css

 

 

فايل اول با پسوند htm. همان صفحه اصلي است که در وب به نمايش در مي آيد. فايل دوم فايل reset.css است لطفا براي دريافت اطلاعات در اين مورد به اين اينجا مراجعه کنيد. فايل سوم فايل style.css است که به صفحه htm. دستور ميدهد که چگونه محتوياتش را نمايش دهد.

 

صفحه htm. و styles.css را که دانلود کرده ايد در يک ويرايشگر صفحه  طراحی وب سایت  مانند frontpage باز کنيد. در حال حاضر صفحه اي مانند تصوير زير را در اختيار داريد که براي سهولت در ارائه توضيحات، ستونها را با خطوط (border) کاملا واضح مشخص کرده ام.

 

  طراحی وب سایت 

 

اکنون به فايل styles.css نگاهي مي اندازيم. براي اين که به اهميت اين فايل بيشتر پي ببريد ابتدا فايل htm. را در مروگر مشاهده کنيد سپس فايل styles.css را از درون فولدر، delete کرده و مجددا فايل htm. را مشاهده کنيد (اگر صفحه شما در مرورگر باز است آن را refresh کنيد تا تغيرات را ببينيد). براي اطلاعات بيشتر در مورد محتويات styles.css اجزاي آن را بررسي ميکنيم:

 

شما در اين فايل نوشته هايي را مشاهده ميکنيد که هر کدام مربوط به يک ستون مي باشد در ابتدا بايد بدانيد که اسامي ستونها در فايل styles.css با علامت # مشخص ميشوند. مثلا: wrapper# در فايل styles.css که در اختيار داريد چگونگي نمايش ستون wrapper را در صفحه htm. مشخص ميکند. کدهاي HTML صفحه htm. را در ويرايشگر خود مرور کنيد و نام wrapper را بيابيد. اين ستون   طراحی وب سایت ، ظرف يا قالب اصلي کار شماست که در صفحه htm. آن را براي شما با border قرمز مشخص کرده ام و بقيه ستونها مانند قطعات پازل در آن جاي ميگيرند.

 

#wrapper {

margin: auto;

direction: rtl;

width: 922px;

border: 1px solid #FF0000;

}

 

نوشته هايي که در ميان دو علامت { } قرار دارند و زير نام يک ستون قرار ميگيرند دستوارتي هستند که نحوه نمايش آن ستون را اعمال ميکنند. همان طور که در دستور بالا که قسمتي از فايل styles.css شماست و متعلق به ستون wrapper ميباشد مشاهده ميکنيد به اين ستون دستور داده شده تا به حالت اتوماتيک (خودکار) در صفحه جاي بگيرد ( ;margin: auto )،

 

نوشته هاي درون آن از حالت نوشتاري راست به چپ پيروي کنند که براي نوشتار و تايپ فارسي مناسب است ( ;direction: rtl ) منظور از مقدار rtl که در مقابل کلمه direction نوشته شده همان right to left يا چپ به راست است،

 

عرض آن 922 پيکسل باشد ( ;width: 922px ) و

 

اطراف آن را يک خط ممتد با ضخامت 1 پيکسل و رنگ قرمز احاطه کند ( ;border: 1px solid #FF0000 ).

 

اکنون دستورات ستون ديگري را مرور ميکنيم تا کدهاي جديدتري را پيدا کنيم. در فايل styles.css به دنبال ستون leftcolumn بگرديد دستورات اين ستون را در قسمت پايين مشاهده ميکنيد:

 

#leftcolumn {

border: 1px solid #000000;

background:#FFFFFF;

margin: 0px 0px 5px 0px;

padding: 10px;

height: 350px;

width: 204px;

float: right;

}

 

کدهاي جديدي که در اين قسمت مشاهده ميکنيد عبارت است از: background و padding و height و float .

 

اين کدها به ستون leftcolumn  دستور ميدهند که:

 

رنگ پس زمينه اش سفيد باشد ( ;background:#FFFFFF )،

 

فاصله محتويات درونش مانند تصاوير عکسها و ... از اطراف 10 پيکسل باشد ( ;padding: 10px )،

 

ارتفاع آن 350 پيکسل باشد ( ;height: 350px ) و

 

جايگاه قرار گرفتنش در صفحه سمت راست باشد ( ;float: right ).

 

شما ميتوانيد با تغيير اندازه width (عرض) ستون wrapper و ستونهاي داخل آن شکل قالب را کاملا تغيير دهيد. قصد دارم چند طرح را مشخص کنم تا افرادي که اين سري آموزشي را دنبال ميکنند براي تمرين از آن  طراحی وب سایت  به عنوان الگو استفاده کنند.

 

براي تمرين، اندازه عرض ستونها را تغيير دهيد درست کردن قالبهايي به شکل زير را تمرين کنيد تغييرات در کدهاي اصلي را در قسمت بعد آموزش ميدهم.